<script lang="ts" setup>
import type { SystemAuditLogApi } from '#/api';

import { computed, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { Descriptions, Spin, Tag } from 'ant-design-vue';

import { getAuditLogById } from '#/api/system';
import { $t } from '#/locales';

const logData = ref<SystemAuditLogApi.AuditLog>();
const loading = ref(false);

const [Drawer, drawerApi] = useVbenDrawer({
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData<{ id: number | string }>();
      if (data?.id) {
        await loadLogDetail(data.id);
      }
    }
  },
});

async function loadLogDetail(id: number | string) {
  try {
    loading.value = true;
    const response = await getAuditLogById(id);
    logData.value = response;
  } finally {
    loading.value = false;
  }
}

const getDrawerTitle = computed(() => {
  return $t('system.auditlog.detail');
});

const getStatusColor = (status: number) => {
  if (status >= 200 && status < 300) return 'success';
  if (status >= 400 && status < 500) return 'warning';
  if (status >= 500) return 'error';
  return 'default';
};

const getMethodColor = (method: string) => {
  const colors: Record<string, string> = {
    GET: 'success',
    POST: 'processing',
    PUT: 'warning',
    DELETE: 'error',
    PATCH: 'default',
  };
  return colors[method] || 'default';
};

const formatResponseTime = (time: number) => {
  if (time < 100) return `${time}ms`;
  if (time < 1000) return `${time}ms`;
  return `${(time / 1000).toFixed(2)}s`;
};

const formatJson = (data: any) => {
  if (!data) return '';
  try {
    return JSON.stringify(data, null, 2);
  } catch {
    return String(data);
  }
};
</script>

<template>
  <Drawer class="w-full max-w-[700px]" :title="getDrawerTitle">
    <Spin :spinning="loading">
      <div v-if="logData" class="space-y-4">
        <!-- 基本信息 -->
        <Descriptions title="基本信息" :column="2" bordered>
          <Descriptions.Item :label="$t('system.auditlog.id')">
            {{ logData.id }}
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.username')">
            {{ logData.username }}
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.module')">
            {{ logData.module }}
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.summary')">
            {{ logData.summary }}
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.method')">
            <Tag :color="getMethodColor(logData.method)">
              {{ logData.method }}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.status')">
            <Tag :color="getStatusColor(logData.status)">
              {{ logData.status }}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.path')" :span="2">
            <code class="rounded bg-gray-100 px-2 py-1">{{
              logData.path
            }}</code>
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.responseTime')">
            {{ formatResponseTime(logData.response_time) }}
          </Descriptions.Item>
          <Descriptions.Item :label="$t('system.auditlog.createTime')">
            {{ logData.created_at }}
          </Descriptions.Item>
        </Descriptions>

        <!-- 请求参数 -->
        <div v-if="logData.request_args">
          <h3 class="mb-2 text-lg font-medium">
            {{ $t('system.auditlog.requestArgs') }}
          </h3>
          <pre class="max-h-60 overflow-auto rounded border bg-gray-50 p-4">{{
            formatJson(logData.request_args)
          }}</pre>
        </div>

        <!-- 返回数据 -->
        <div v-if="logData.response_body">
          <h3 class="mb-2 text-lg font-medium">
            {{ $t('system.auditlog.responseBody') }}
          </h3>
          <pre class="max-h-60 overflow-auto rounded border bg-gray-50 p-4">{{
            formatJson(logData.response_body)
          }}</pre>
        </div>
      </div>

      <div v-if="!logData && !loading" class="py-8 text-center text-gray-500">
        暂无数据
      </div>
    </Spin>
  </Drawer>
</template>

<style scoped>
pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.2;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.2;
}

:deep(.ant-descriptions-item) {
  padding-bottom: 8px !important;
}

:deep(.ant-descriptions-item-label),
:deep(.ant-descriptions-item-content) {
  padding: 4px 8px !important;
  line-height: 1.3 !important;
}
</style>
